<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<link rel="stylesheet"
	href="${pageContext.request.contextPath}/css/register.css">
<script type="text/javascript"
	src="${pageContext.request.contextPath}/js/jquery-1.4.2.js"></script>
<body>
	<div class="header">
		<div id="header">
			<div class="site-nav single-nav">
				<div class="site-nav-logo">
					<a href=""> <img
						src="https://img3.doubanio.com/dae/accounts/static/pics/douban/lg_account.png">
					</a>
				</div>
			</div>
		</div>
	</div>
	<div class="wrapper">
		<h1>欢迎加入豆瓣</h1>
		<div class="article">
			<form method="post" action="${pageContext.request.contextPath}/user_register.action">
				<div style="display:none;">
					<input type="hidden" name="source" value="simple" /> <input
						type="hidden" name="redir" value="  " /> <img
						src="https://www.douban.com/pics/blank.gif" />
				</div>
				<div class="item">
					<label>登陆名</label> <input id="names" name="user.loginname"
						type="text" class="basic-input" maxlength="60" value="" /> &nbsp;<span id="showInfo" style="color: red"></span>
				</div>
				<div class="item">
					<label>邮箱</label> <input id="email" name="user.useremail"
						type="text" class="basic-input" maxlength="60" value="" />&nbsp;<span id="showInfo" style="color: red"></span>
				</div>
				<div class="suggestion">
					<div id="email_suggestion"></div>
				</div>
				<div class="item">
					<label>密码</label> <input id="password" name="user.password"
						type="password" class="basic-input" maxlength="20" /> &nbsp;<span id="showInfo" style="color: red"></span>
				</div>
				<div class="item">
					<label>名号</label> <input id="name" name="user.username" type="text"
						class="basic-input" maxlength="15" value="" />
				</div>
				<div class="suggestion">
					<span class="tips">第一印象很重要，起个响亮的名号吧</span>
				</div>

				<div class="item">
					<label>常居地</label> <span class="loc"> <em id="location">豆瓣猜你在<strong>成都</strong>，没猜对？
					</em> <a href="" class="a-btn-location" id="edloc">手动选择</a>
					</span> <input type="hidden" name="loc" />
				</div>
				<div class="item">
					<label>手机号</label> <input id="verify_phone_num" type="text"  name="user.phone"
						class="basic-input" value="+86" /> &nbsp;<span id="showInfo" style="color: red"></span>
				</div>
				<div class="suggestion">
					<span class="tips">用手机接收注册验证码 <br />
						验证的手机号如果没有绑定过帐号，会自动绑定当前帐号
					</span>
				</div>
				<div class="item captcha-item">
					<label>验证码</label> <input id="code" name="code" type="text"
						class="basic-input small" /> <input id="request-phone-code-btn"
						type="button" value="获取验证码" /> <span id="tips-error" class="tips"><em></em></span>
					<span id="tips-info" class="tips"></span> <span
						class="validate-error" id="frm_error"></span>
				</div>
				<div class="item">
					<p class="agreement">
						<label for="agreement" class="agreement-label"> <input
							type="checkbox" id="agreement" name="agreement" /> 我已经认真阅读并同意豆瓣的《<a
							href="">使用协议</a>》。
						</label>
					</p>
				</div>
				<div class="item-submit">
					<label>&nbsp;</label> <input type="submit" name="register"
						value="注册" disabled="disabled" id="buttonreg"
						class="btn-submit disabled" />
				</div>
			</form>

		</div>
		<div class="aside">
			<ul class="sidenav">
				<li>&gt;&nbsp;<a href="">点击下载豆瓣移动应用</a></li>
				<li>&gt;&nbsp;已经拥有豆瓣帐号? <a rel="nofollow" href="${pageContext.request.contextPath}/user_loginPage.action">直接登录</a></li>
			</ul>
		</div>
	</div>

	<div class="footer">

		<div id="footer">
			<span id="icp" class="fleft gray-link">&copy; lalala</span> <span
				class="fright"> <a href="">关于豆瓣</a> · <a href="">在豆瓣工作</a> ·
				<a href="">联系我们</a> · <a href="">免责声明</a> · <a href="">帮助中心</a> · <a
				href="">开发者</a> · <a href="">移动应用</a> · <a href="">豆瓣广告</a>
			</span>
		</div>
	</div>



	<script>
		$(function() {
				var code="";
			$("#names").blur(function() {
				var userdate = $(this).val();
				var url = "${pageContext.request.contextPath}/user_checkUserName";
				var date = {
					loginname : userdate
				};
				$.post(
					url,
					date,
					function(dates) {
						if(dates==1){
						$("#showInfo").html("用户名已存在");
						}else {
						$("#showInfo").html("用户名可以注册");
						}
					}
				)
			});
			$("#password").blur(function(){
			   if($(this).val().length<3){
			      $(this).next().html("密码长度不够");
			      return ;
			   };
			         $(this).next().html("");
	      	});
			$("#email").blur(function(){
			var reg=/^(.+)@(.+)$/;
				var jsValue=$(this).val();
               var matchArr=jsValue.match(reg);
				if(matchArr==null){
				  $(this).next().html('邮箱格式不正确');
				  return;
				}
				$(this).next().html("");
				
				
			});
		   var	 phoneValue="";
		    $("#verify_phone_num").blur(function(){
		      if($(this).val().length<11||isNaN($(this).val())){
		      $(this).next().html("手机格式不正确");
		      return;
		      }
		      phoneValue=$(this).val();
		      alert(phoneValue)
		         $(this).next().html("");
		    });        		 
			//checked后同意注册
			document.getElementById("agreement").onclick = function() {
				if (this.checked) {
					document.getElementById("buttonreg").removeAttribute("disabled");
				}
			};

			
	      $("#request-phone-code-btn").click(function(){
	       $.post("${pageContext.request.contextPath}/user_getPhoeCode",
	       {phone:phoneValue},
	       function(date){
	         code=date;
	         alert(code);
	       });
	      
	      });
	    $("#code").blur(function(){
	   					 
        if(parseInt($(this).val())==parseInt(code)){
           return ;
           }
          alert("验证码不正确");
        
			 });

			 
		});
	</script>
</body>
</html>